<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataZymb } from "@/api/search";
import { addOrUpdateZymb } from "@/api/addOrUpdate";
import { postTableData } from "@/api/table";

const city = window.globalObj.name;
const editorRef = shallowRef();

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");

// 加载html
const initHtml = () => {
  searchDataZymb({ m: "力量运用" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "力量运用")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "主要明确重要目标防护的力量编组、力量配置、任务区分，以及跨区支援力量的配属等。<br/>目标名称1：XX。<br/>主要任务：转移重要设备，干扰电磁信号，干扰电磁信号，拦截空袭武器，干扰电磁信号。<br/>辖区内支援配属专业队名称1：XX。<br/>编组人数：XX。<br/>使用人数：XX。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateZymb({
      m: "力量运用",
      data: [
        {
          k: "力量运用",
          v: valueHtml.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

// 重要目标防护场所和措施任务需求清单
const llList = ref([]);
const getLlData = () => {
  return postTableData({
    docType: "targetProtection",
    method: "liliangbianchengpeizhirenwu",
  }).then((res) => {
    if (res.code === 200) {
      llList.value = res?.data || [];
    }
  });
};

onMounted(async () => {
  await initHtml();
  await getLlData();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (!editor) return;
  editor.destroy();
});

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

const tableData = ref([]);
</script>
<template>
  <div class="">
    <div class="text-center">{{ city }}本级力量编组、配置和任务区分</div>
    <el-table
      id="table"
      :data="llList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政区划" />
      <el-table-column prop="name" label="编组名称" />
      <el-table-column prop="bc" label="编组单位" />
      <el-table-column prop="zsbswz" label="战时部署位置" />
      <el-table-column prop="zhdw" label="指挥单位" />
      <el-table-column prop="num" label="人员数量" />
      <el-table-column prop="zsbzrw" label="主要保障任务" />
    </el-table>
    <FirstTitle
      class="top-15"
      name="重要经济目标单位力量编组、配置和任务区分"
    />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>